<template>
    <div class="good-list" @touchmove="touchmoveHandle">
        <div class="chunk" :style="{ height: chunkHeight + 'px' }"></div>
        <loading v-show="loading"></loading>
        <div class="fixed-header">
            <SearchHead @serachGoods="serachGoods"></SearchHead>
            <div class="screen f14">
                <div class="current-model" @click="optionsClick">
                    <span class="title" :class="{ active: openOptions }">{{ title }}</span>
                    <img v-if="openOptions" class="icon" src="@/assets/images/down2-hover.png">
                    <img v-else class="icon" src="@/assets/images/down1.png">
                </div>
                <div class="select" @click="customClick">
                    <span class="title" :class="{ active: openCustom }">筛选</span>
                    <img v-if="openCustom" class="icon" src="@/assets/images/screen-hover.png">
                    <img v-else class="icon" src="@/assets/images/screen.png">
                </div>
            </div>
        </div>
        <div class="options f14" :class="{ active: openOptions }" :style="{ top: chunkHeight + 'px' }">
            <span class="item" v-for="(item, index) in options" :key="index" :class="{ active: selectIndex == index }"
                @click="switchIndex(index)">{{ item }}</span>
        </div>
        <div class="custom" :class="{ active: openCustom }" :style="{ height: windowHeight - chunkHeight + 'px' }">
            <span class="express b f14">物流服务</span>
            <div class="ww b">
                <span class="free f12" :class="{ active: index == 1 }" @click="expressHandle(1)">包邮</span>
                <span class="pay l f12" :class="{ active: index == 2 }" @click="expressHandle(2)">到付</span>
            </div>
            <span class="range b f14">租金范围</span>
            <div class="day">
                <span class="f14 b">租金</span>
                <span class="f12">(元/天)</span>
            </div>
            <div class="price">
                <input class="f12" type="number" v-model.number="requestData.min_price" placeholder="输入最低价">
                <span>-</span>
                <input class="f12" type="number" v-model.number="requestData.max_price" placeholder="输入最高价">
            </div>
            <div class="change f14">
                <span class="reset" @click="resetHandle">重置</span>
                <span class="submit" @click="submitHandle">提交</span>
            </div>
        </div>
        <div class="bg" :class="{ active: openOptions || openCustom }" @click="closeBg"></div>
        <!-- 数据 -->
        <van-list class="dataList" v-if="dataList.length" v-model="loading" :finished="finished" @load="onLoad">
            <div class="item b" v-for="(item) in dataList" :key="item.id" @click="goGoods(item)">
                <Commodity :activity_title="item.activity_title" :dayRent_new="item.dayRent_new"
                    :extension_title="item.extension_title" :imgurl="getOtherImageUrl(item.imgurl)" :title="item.title"
                    :min_price="item.min_price" :rent_label="item.rent_label">
                </Commodity>
            </div>
        </van-list>
        <div class="noData" v-else>
            <img class="image" src="@/assets/images/noGoods.jpg" alt="noGoods">
            <span class="f12">没有符合条件的商品</span>
        </div>
    </div>
</template>
<script>
import { List } from 'vant';
import Commodity from "@/components/Commodity.vue"
import SearchHead from '@/components/GoodsList/SearchHead.vue';

export default {
    name: "GoodList",
    components: {
        SearchHead,
        Commodity,
        [List.name]: List,
    },
    data() {
        return {
            selectIndex: 0,
            title: "默认排序",
            options: ["默认排序", "价格降序", "价格升序", "最新上架"],
            orderby_name: ["id", "min_price", "min_price", "update_time"],
            chunkHeight: 0,
            openOptions: false,
            openCustom: false,
            windowHeight: window.screen.height,
            loading: false,
            finished: false,
            dataList: [],
            index: 1,
            requestData: {
                cate_id: 1,
                orderby_name: "id",
                sort: "desc",
                goods_name: "",
                min_price: "",
                max_price: "",
                convey_type: 1,
                pageSize: 10,
                page: 1,
            }
        }
    },
    created() {
        const { id, name } = this.$route.query;
        this.requestData.cate_id = id ? id : 0;
        if (!id) this.requestData.goods_name = name;
        this.onLoad();
    },
    methods: {
        touchmoveHandle(event) {
            if (this.openOptions || this.openCustom) event.preventDefault()
        },
        serachGoods(goods_name) {
            this.requestData.goods_name = goods_name;
            this.cleanAndGet();
        },
        resetHandle() {
            this.index = 1;
            const array = ["min_price", "max_price", "convey_type"]
            for (let i in this.requestData) {
                if (array.includes(i))
                    this.requestData[i] = ""
            }
            this.cleanAndGet();
        },
        submitHandle() {
            this.cleanAndGet();
        },
        cleanAndGet() {
            if (this.loading) return;
            console.log('cleanAndGet');
            this.requestData.page = 1;
            this.finished = false;
            this.dataList = [];
            this.onLoad();
        },
        expressHandle(index) {
            this.index = index;
            this.requestData.convey_type = index;
        },
        switchIndex(index) {
            this.selectIndex = index;
            this.title = this.options[index];
            const sortId = this.orderby_name[index];
            if (index == 2) {
                this.requestData.sort = "asc"
            } else {
                this.requestData.sort = "desc"
            }
            this.requestData.orderby_name = sortId;
            this.cleanAndGet()
        },
        optionsClick() {
            this.openOptions = !this.openOptions;
            this.openCustom = false;
        },
        customClick() {
            this.openCustom = !this.openCustom;
            this.openOptions = false;
        },
        closeBg() {
            this.openOptions = false;
            this.openCustom = false;
        },
        onLoad() {
            this.loading = true;
            this.$sendPost("Goods/getGoodsList", this.requestData)
                .then(res => {
                    if (res.data.status === 200) {
                        const { data } = res.data.data;
                        this.dataList.push(...data)
                        this.requestData.page++;
                        if (data.length < this.requestData.pageSize) this.finished = true;
                    }
                    this.loading = false;
                }).catch(() => {
                    this.finished = true;
                    this.loading = false;
                })
        },
        goGoods(item) {
            const { id, activity_id } = item;
            this.$router.push({ name: "goods", query: { goods_id: id, activity_id } })
        },
        getChunkHeight() {
            const fixedHeaderNode = document.querySelector(".fixed-header");
            const nodeHeight = fixedHeaderNode.clientHeight;
            this.chunkHeight = nodeHeight;
        }
    },
    mounted() {
        this.getChunkHeight();
    }
}
</script>
<style lang="scss" scoped>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    appearance: none !important;
}

input[type='number'] {
    appearance: textfield;
}

::v-deep .van-list__loading {
    opacity: 0;
    z-index: -100;
}

.good-list {
    background-color: #ffffff;
    min-height: 100vh;
    max-width: 100vw;

    .chunk {
        width: 100vw;
    }

    .fixed-header {
        position: fixed;
        width: 100vw;
        top: 0;
        left: 0;
        z-index: 2000;
        background-color: white;

        .screen {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;

            .current-model {
                display: flex;

                .title {
                    &.active {
                        color: #d22f34;
                    }
                }

                .icon {
                    width: 10px;
                    margin-left: 5px;
                    object-fit: contain;
                }
            }

            .select {
                display: flex;

                .title {
                    &.active {
                        color: #d22f34;
                    }
                }

                .icon {
                    width: 12px;
                    margin-left: 5px;
                    object-fit: contain;
                }
            }
        }
    }

    .options {
        padding: 10px;
        display: flex;
        flex-direction: column;
        padding-bottom: 40px;
        z-index: 1500;
        position: fixed;
        background-color: #f9f9f9;
        transition: all .3s;
        transform: translateY(-100%);
        width: 100vw;

        &.active {
            transform: translateY(0%);
        }

        .item {
            margin-bottom: 10px;

            &.active {
                color: #d22f34;
            }
        }
    }

    .custom {
        width: 250px;
        position: fixed;
        right: 0;
        background-color: #f9f9f9;
        transform: translateX(100%);
        transition: all .3s;
        z-index: 1200;
        padding: 10px;

        &.active {
            transform: translateX(0%);
        }

        .express,
        span {
            display: inline-block;
        }

        .ww {
            span {
                padding: 3px 8px;
                background-color: #efefef;

                &.active {
                    color: white;
                    background-color: #f62221;
                }
            }
        }

        .day {
            span {
                &:nth-of-type(2) {
                    color: #9a9a9a;
                    margin-left: 5px;
                }
            }
        }

        .price {
            display: flex;
            align-items: center;

            input {
                width: 70px;
                padding: 7px 4px;
                border: 0;
                color: #9a9a9a;

                &::placeholder {
                    font-size: 12px;
                    transform: scale(.8) translate(2px, 1px);
                    text-align: center;
                }
            }

            span {
                margin: 0 10px;
            }
        }

        .change {
            display: flex;
            position: absolute;
            left: 50%;
            width: 145px;
            transform: translateX(-50%);
            bottom: 50px;

            span {
                padding: 5px 20px;
                display: inline-block;
                flex-shrink: 0;

                &:nth-of-type(1) {
                    margin-right: 10px;
                    background-color: #efefef;
                    color: #a5a5a5;
                    border-top-left-radius: 15px;
                    border-bottom-left-radius: 15px;
                }

                &:nth-of-type(2) {
                    background-color: #f62221;
                    color: white;
                    border-top-right-radius: 15px;
                    border-bottom-right-radius: 15px;
                }
            }
        }
    }

    .bg {
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, .3);
        opacity: 0;
        z-index: -100;
        transition: .3s;

        &.active {
            opacity: 1;
            z-index: 100;
        }
    }

    .dataList {
        padding: 13.3px;
        background-color: #f6f6f6;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        // background-color: pink;
        padding-bottom: 0;

        .item {
            width: 167.5px;
            background-color: rgb(255, 255, 255);
            border-radius: 8px;
            overflow: hidden;

            &:nth-of-type(odd) {
                margin-right: 13.3px;
            }
        }
    }

    .noData {
        text-align: center;
        background-color: #ffffff;


        .image {
            width: 100%;
        }

        span {
            margin-top: 10px;
            color: #9d9d9d;
        }
    }
}
</style>